<template>
  <div class="own-space">
    <a-card class="own-space-new">
      <div class="own-wrap">
        <div style="width: 240px">
          <a-tabs v-model:activeKey="currMenu" tabPosition="left" class="vertical-tabs">
            <a-tab-pane key="基本信息" tab="基本信息" />
          </a-tabs>
        </div>
        <div style="width: 100%; padding: 8px 40px">
          <div class="title">{{ currMenu }}</div>
          <div>
            <div v-show="currMenu === '基本信息'">
              <a-form ref="userForm" :model="formData" :label-col="{ span: 3 }" :rules="rules">
                <a-form-item label="头像" field="avatar">
                  <a-upload :action="uploadUrl" :headers="header" @success="handleSuccess">
                    <template #upload-button>
                      <div>
                        <div class="arco-upload-list-picture custom-upload-avatar" v-if="formData && formData.avatar">
                          <img :src="formData.avatar" />
                          <div class="arco-upload-list-picture-mask">
                            <IconEdit />
                          </div>
                        </div>
                        <div v-else class="arco-upload-picture-card">
                          <div class="arco-upload-picture-card-text">
                            <IconPlus />
                            <div style="margin-top: 10px; font-weight: 600">上传头像</div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </a-upload>
                </a-form-item>
                <a-form-item label="昵称：" field="nickname">
                  <a-input v-model.trim="formData.nickname" :max-length="20" style="width: 250px" />
                </a-form-item>
                <a-form-item label="性别" field="gender">
                  <a-radio-group v-model="formData.gender">
                    <a-radio :value="1">男</a-radio>
                    <a-radio :value="2">女</a-radio>
                    <a-radio :value="3">保密</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="apikey: " field="apiKey">
                  <div style="display: flex;align-items: center;">
                    <div >{{ formData.apiKey }}</div>
                     <div style="margin-left: 10px;">
                      <a-button type="primary" @click="resetAPIKey">重置</a-button>
                     </div>
                  </div>
                  
                </a-form-item>
                <a-form-item>
                  <a-button type="primary" style="width: 100px; margin-right: 5px" :loading="saveLoading"
                    @click="saveEdit">
                    保存
                  </a-button>
                </a-form-item>
              </a-form>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { FormInstance } from '@arco-design/web-vue'
import { useUserStore } from '@/stores'
import { updateUserInfo, genateApiKey } from '@/apis/user'
import { Message } from '@arco-design/web-vue'

import { getToken } from '@/utils/auth'


/** 状态管理 */
const userStore = useUserStore()

const userForm = ref()

const uploadUrl = import.meta.env.VITE_API_BASE_URL + '/file/oss/upload'
const header = computed(() => {
  return {
    "Authorization": getToken() || ''
  }
})



const rules: FormInstance['rules'] = {

  nickname: [
    { required: true, message: '请输入昵称' },
  ],

  gender: [
    { required: true, message: '请输入昵称' },
  ],
  avatar: [
    { required: true, message: '请输入昵称' },
  ],
  apiKey: [
    { required: true, message: '请输入昵称' },
  ],

}



// 响应式数据
const currMenu = ref("基本信息");
const saveLoading = ref(false);
const formData = ref({
  avatar: "",
  username: "",
  nickname: "",
  gender: 1
});

const handleSuccess = (file) => {
  const res = file.response
  if (res.code == 200) {
    formData.value.avatar = res.data.src
    Message.success('上传成功')

  } else {
    Message.error('上传失败,请重试')

  }
}
onMounted(() => {
  formData.value = userStore.userInfo;

});

const resetAPIKey = async () => {
  await genateApiKey()
  Message.success('修改成功')
  userStore.getInfo()
}


const saveEdit = async () => {
  const valid = await userForm.value?.validate()
  if (valid) return false
  // 保存逻辑
  saveLoading.value = true;
  try {
    const res = await updateUserInfo(formData.value)
    Message.success('修改成功')
    userStore.getInfo()


  } finally {
    saveLoading.value = false;
  }


};
</script>

<style scoped>
.own-space {
  padding: 20px;
}

.own-space-new {
  min-height: calc(100vh - 120px);
}

.own-wrap {
  display: flex;
}

.title {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.safe .item {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #eeeeee;
}
</style>
